<template>
  <div class="trace-view">
    <!-- 搜索栏 -->
    <el-row :gutter="20" style="margin-bottom: 15px;">
      <el-col :span="6">
        <el-input v-model="searchQuery" placeholder="输入服务名或Trace ID查询"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="fetchTraces">搜索</el-button>
      </el-col>
    </el-row>

    <el-card >
      <!-- 追踪列表 -->
      <el-table :data="filteredTraces" border style="width: 100%">
        <el-table-column prop="traceId" label="Trace ID" width="280"></el-table-column>
        <el-table-column prop="serviceName" label="服务名称" width="180"></el-table-column>
        <el-table-column prop="duration" label="耗时(ms)" width="120"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="timestamp" label="时间" width="160"></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" @click="viewTraceDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 追踪详情对话框 -->
    <el-dialog v-model="showDetailDialog" title="调用链详情" width="60%">
      <div v-if="selectedTrace">
        <h3>Trace ID：{{ selectedTrace.traceId }}</h3>
        <p>总耗时：<strong>{{ selectedTrace.duration }}ms</strong></p>
        <el-steps direction="vertical" :active="selectedTrace.segments.length" space="80px">
          <el-step v-for="(segment, index) in selectedTrace.segments" :key="index"
                   :title="`${segment.serviceName} - ${segment.operationName}`"
                   :description="`开始时间: ${segment.startTime}, 耗时: ${segment.duration}ms, 状态: ${segment.status}${segment.error ? ', 错误: '+segment.error : ''}`">
          </el-step>
        </el-steps>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, computed} from "vue";
import {
  ElRow,
  ElCol,
  ElInput,
  ElButton,
  ElTable,
  ElTableColumn,
  ElTag,
  ElDialog,
  ElSteps,
  ElStep
} from 'element-plus';

// 模拟测试数据
const mockTraces = [
  {
    traceId: "abc1234567890def",
    serviceName: "order-service",
    duration: 250,
    status: "success",
    timestamp: "2025-06-15T23:55:00Z",
    segments: [
      {
        serviceName: "order-service",
        operationName: "/api/v1/create-order",
        duration: 250,
        status: "success",
        startTime: "2025-06-15T23:55:00.000Z"
      },
      {
        serviceName: "payment-service",
        operationName: "/api/v1/charge",
        duration: 120,
        status: "success",
        startTime: "2025-06-15T23:55:00.100Z"
      },
      {
        serviceName: "inventory-service",
        operationName: "/api/v1/deduct-stock",
        duration: 80,
        status: "success",
        startTime: "2025-06-15T23:55:00.050Z"
      }
    ]
  },
  {
    traceId: "ghi9876543210jkl",
    serviceName: "user-service",
    duration: 180,
    status: "failure",
    timestamp: "2025-06-15T23:50:30Z",
    segments: [
      {
        serviceName: "user-service",
        operationName: "/api/v1/login",
        duration: 180,
        status: "failure",
        startTime: "2025-06-15T23:50:30.000Z",
        error: "Authentication failed"
      },
      {
        serviceName: "auth-service",
        operationName: "/api/v1/validate-token",
        duration: 150,
        status: "success",
        startTime: "2025-06-15T23:50:30.020Z"
      }
    ]
  },
  {
    traceId: "mno4567890123pqr",
    serviceName: "reporting-service",
    duration: 600,
    status: "success",
    timestamp: "2025-06-15T23:45:15Z",
    segments: [
      {
        serviceName: "reporting-service",
        operationName: "/api/v1/generate-report",
        duration: 600,
        status: "success",
        startTime: "2025-06-15T23:45:15.000Z"
      },
      {
        serviceName: "analytics-service",
        operationName: "/api/v1/fetch-data",
        duration: 400,
        status: "success",
        startTime: "2025-06-15T23:45:15.100Z"
      },
      {
        serviceName: "db-service",
        operationName: "/query",
        duration: 300,
        status: "success",
        startTime: "2025-06-15T23:45:15.150Z"
      }
    ]
  }
];

// 响应式数据
const traces = ref([]);
const searchQuery = ref('');
const showDetailDialog = ref(false);
const selectedTrace = ref(null);

// 过滤后的追踪列表
const filteredTraces = computed(() => {
  const query = searchQuery.value.toLowerCase();
  return traces.value.filter(trace =>
      trace.traceId.toLowerCase().includes(query) ||
      trace.serviceName.toLowerCase().includes(query)
  );
});

// 获取追踪数据（模拟）
function fetchTraces() {
  traces.value = mockTraces;
}

// 查看详情
function viewTraceDetail(trace) {
  selectedTrace.value = trace;
  showDetailDialog.value = true;
}
</script>

<style scoped>
.trace-view {
  padding: 20px;
  background-color: #f9fafb;
}
</style>
